<template>
  <div class="p-session">
    <div class="u-list">
      <div
        v-for="(session,index) in sessionlist"
        class="u-list-item"
        :key="session.id"
        :sessionid="session.id"
        :class="{ active: session.id === currSessionId }"
        @click.stop="enterChat(session)"
      >
        <div class="u-cell__hd">
          <img class="icon u-circle" slot="icon" :src="session.avatar" />
          <span class="u-unread" v-show="session.unread > 0">{{session.unread}}</span>
        </div>
        <div class="u-cell__bd">
          <p>
            <label class="u-label">{{session.name}}</label>
          </p>
          <p class="u-label-desc">{{session.lastMsgShow}}</p>
        </div>
        <div class="u-cell__ft">
          <span class="u-session-time">{{session.updateTimeShow}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from "@/utils";
import config from "@/configs";

export default {
  data() {
    return {};
  },
  computed: {
    userInfos() {
      return this.$store.state.im.userInfos;
    },
    myPhoneId() {
      return this.$store.state.im.userUID;
    },
    currSessionId() {
      return this.$store.state.im.currSessionId;
    },
    sessionlist() {
      let that = this;
      let sessionlist = this.$store.state.im.sessionlist.filter(item => {
        item.name = "";
        item.avatar = that.userInfos[item.to].avatar || config.defaultUserIcon;
        if (item.scene === "p2p") {
          let userInfo = this.userInfos[item.to];

          if (item.to === this.myPhoneId) {
            return false;
          }

          if (userInfo) {
            item.name = util.getFriendAlias(userInfo);
            item.avatar = userInfo.avatar;
          }
        }
        let lastMsg = item.lastMsg || {};

        if (lastMsg.type === "text") {
          item.lastMsgShow = lastMsg.text || "";
        } else if (lastMsg.type === "custom") {
          item.lastMsgShow = util.parseCustomMsg(lastMsg);
        } else if (util.mapMsgType(lastMsg)) {
          item.lastMsgShow = `[${util.mapMsgType(lastMsg)}]`;
        } else {
          item.lastMsgShow = "";
        }
        if (item.updateTime) {
          item.updateTimeShow = util.formatDate(item.updateTime, true);
        }
        return item;
      });

      return sessionlist;
    }
  },
  methods: {
    enterChat(session) {
      if (session && session.id != this.currSessionId) {
        this.$store.dispatch("im/setCurrSession", session.id);
        this.$store.commit("im/resetNoMoreHistoryMsgs");

        this.getLocalMsgs(session);
      }
    },
    getLocalMsgs(session) {
      this.$store.dispatch("im/getHistoryMsgs", {
        scene: session.scene,
        to: session.to,
        limit: 10
      });
    }
  }
};
</script>

<style lang="less" scoped>
.u-list {
  .u-list-item {
    position: relative;
    height: 60px;
    padding: 13px 16px;
    border-bottom: 1px solid #f0f4f9;
    box-sizing: border-box;
    &.active {
      background: #f2f6fa;
    }
  }
  .u-cell__hd {
    position: relative;
    margin-right: 15px;
    float: left;
  }
  .u-cell__bd {
    flex: 1;
    max-width: 80%;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: #33385e;
    > p {
      line-height: 100%;
    }
  }
  .u-cell__ft {
    text-align: right;
    color: #33385e;
  }
  .u-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }
  .u-session-time {
    display: inline-block;
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0.3;
    font-size: 12px;
  }
  .u-label {
    display: inline-block;
    min-width: 1px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
  }
  .u-label-desc {
    // vertical-align: top;
    height: 17px;
    font-size: 12px;
    line-height: 17px;
    margin-top: 3px;
    opacity: 0.5;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 80%;
    overflow: hidden;
  }
  .u-unread {
    display: inline-block;
    position: absolute;
    right: 0;
    top: -8px;
    padding: 0 5px;
    min-width: 20px;
    height: 20px;
    line-height: 18px;
    background: rgba(239, 87, 86, 1);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 1);
    font-size: 12px;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    transform: scale(0.85) translateX(50%);
  }
}
</style>
